<template>
	<view class="emoji-animal">
		<swiper :duration="500" @change.stop="changeIndex">
			<swiper-item class="swiper-item">
				<view class="emoji-animal-a1">
					<view @tap.stop="checkEmoji(item)" class="emoji-animal-a1-b1" v-for="(item, index) in emoji1" :key="index">{{item}}</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="emoji-animal-a1">
					<view @tap.stop="checkEmoji(item)" class="emoji-animal-a1-b1" v-for="(item, index) in emoji2" :key="index">{{item}}</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="emoji-animal-a1">
					<view @tap.stop="checkEmoji(item)" class="emoji-animal-a1-b1" v-for="(item, index) in emoji3" :key="index">{{item}}</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="emoji-animal-a2">
			<view class="emoji-animal-a2-b1" :class="[index == 0 ? 'active':'']"></view>
			<view class="emoji-animal-a2-b1" :class="[index == 1 ? 'active':'']"></view>
			<view class="emoji-animal-a2-b1" :class="[index == 2 ? 'active':'']"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				emoji1:['😺','😸','😹','😻','😼','😽','🙀','😿','😾','🐶','🐱','🐭','🐹','🐰','🦊','🐻','🐼','🐨','🐯','🦁','🐮'],
				emoji2:['🐷','🐽','🐸','🐵','🙈','🙉','🙊','🐒','👿','😈','💩','👻','👏','🤝','👍','🤟','👌','✌️','👋','🙏','👀'],
				emoji3:['💪'],
				index:0
				
			};
		},
		props:{
			addEmoji:Function
		},
		methods:{
			checkEmoji(item){
				this.addEmoji(item)
			},
			changeIndex(e){
				this.index = e.detail.current
			}
		}
	}
</script>

<style>
	.emoji-animal-a2 .active{
		background-color: #46aef7;
	}
	.emoji-animal-a1-b1{
		padding: 12rpx 0;
		flex-basis: 14.28%;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 64rpx;
	}
	.emoji-animal-a1{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.emoji-animal-a2{
		position: absolute;
		bottom: 0;
		height: 30rpx;
		width: 100%;
		font-size: 0;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.emoji-animal-a2-b1{
		width: 10rpx;
		height: 10rpx;
		margin: 0 4rpx;
		border-radius: 50%;
		background-color: #e2e2e2;
	}
	.emoji-animal{
		width: 100%;
		height: 308rpx;
		overflow: hidden;
		position: relative;
	}
</style>